<%@ include file="../common/top.jsp" %>

<div id="Catalog">

  <form action="editMyAccountServlet" method="post">
        <h3>User Information</h3>
      <c:if test="${sessionScope.messageAccount!=null}">
          <p><font color="red">${sessionScope.messageAccount}</font></p>
      </c:if>

        <table>
            <tr>
                <td>User ID:</td>
                <td>${sessionScope.loginAccount.username}</td>
            </tr>
            <tr>
                <td>New password:</td>
                <td>
                    <input type="text" name="password" id="password">
                    <img id="right_password"style="display:none"src="./images/right.jpg" width="15" height="15">
                    <img id="wrong_password"style="display:none"src="./images/wrong.jpg"width="15" height="15">
                    <div id="passwordAvailability"></div>
                </td>
            </tr>
            <tr>
                <td>Repeat password:</td>
                <td>
                    <input type="text" name="repeatedPassword" id="repeatedPassword">
                    <img id="right_repeatedPassword"style="display:none"src="./images/right.jpg" width="15" height="15">
                    <img id="wrong_repeatedPassword"style="display:none"src="./images/wrong.jpg"width="15" height="15">
                    <div id="repeatedPasswordAvailability"></div>
                </td>
            </tr>

        </table>

      <!--个人信息-->
      <h3>Account Information</h3>

      <table>
          <tr>
              <td>First name:</td>
              <td><input type="text" id="firstName" name="firstName" value=${sessionScope.loginAccount.firstName}></td>
          </tr>
          <tr>
              <td>Last name:</td>
              <td><input type="text" id="lastName" name="lastName" value=${sessionScope.loginAccount.lastName}></td>
          </tr>
          <tr>
              <td>Email:</td>
              <td>
                  <input type="text" size="40" id="email" name="email" value=${sessionScope.loginAccount.email}>
                  <img id="right_email"style="display:none"src="./images/right.jpg" width="15" height="15">
                  <img id="wrong_email"style="display:none"src="./images/wrong.jpg"width="15" height="15">
                  <div id="emailAvailability"></div>
              </td>
          </tr>
          <tr>
              <td>Phone:</td>
              <td>
                  <input type="text" id="phone" name="phone" value=${sessionScope.loginAccount.phone}>
                  <img id="right_phone"style="display:none"src="./images/right.jpg" width="15" height="15">
                  <img id="wrong_phone"style="display:none"src="./images/wrong.jpg"width="15" height="15">
                  <div id="phoneAvailability"></div>
              </td>
          </tr>
          <tr>
              <td>Address 1:</td>
              <td>
                  <input type="text" size="40" id="address1" name="address1" value=${sessionScope.loginAccount.address1}>
                  <img id="right_address1"style="display:none"src="./images/right.jpg" width="15" height="15">
                  <img id="wrong_address1"style="display:none"src="./images/wrong.jpg"width="15" height="15">
                  <div id="address1Availability"></div>
              </td>
          </tr>
          <tr>
              <td>Address 2:</td>
              <td>
                  <input type="text" size="40" id="address2" name="address2" value=${sessionScope.loginAccount.address2}>
                  <img id="right_address2"style="display:none"src="./images/right.jpg" width="15" height="15">
                  <img id="wrong_address2"style="display:none"src="./images/wrong.jpg"width="15" height="15">
                  <div id="address2Availability"></div>
              </td>
          </tr>
          <tr>
              <td>City:</td>
              <td>
                  <input type="text" id="city" name="city" value=${sessionScope.loginAccount.city}>
                  <img id="right_city"style="display:none"src="./images/right.jpg" width="15" height="15">
                  <img id="wrong_city"style="display:none"src="./images/wrong.jpg"width="15" height="15">
                  <div id="cityAvailability"></div>
              </td>
          </tr>
          <tr>
              <td>State:</td>
              <td>
                  <input type="text" size="4" id="state" name="state" value=${sessionScope.loginAccount.state}>
                  <img id="right_state"style="display:none"src="./images/right.jpg" width="15" height="15">
                  <img id="wrong_state"style="display:none"src="./images/wrong.jpg"width="15" height="15">
                  <div id="stateAvailability"></div>
              </td>
          </tr>
          <tr>
              <td>Zip:</td>
              <td>
                  <input type="text" size="10" id="zip" name="zip" value=${sessionScope.loginAccount.zip}>
                  <img id="right_zip"style="display:none"src="./images/right.jpg" width="15" height="15">
                  <img id="wrong_zip"style="display:none"src="./images/wrong.jpg"width="15" height="15">
                  <div id="zipAvailability"></div>
              </td>
          </tr>
          <tr>
              <td>Country:</td>
              <td>
                  <input type="text" size="15" id="country" name="country" value=${sessionScope.loginAccount.firstName}>
                  <img id="right_country"style="display:none"src="./images/right.jpg" width="15" height="15">
                  <img id="wrong_country"style="display:none"src="./images/wrong.jpg"width="15" height="15">
                  <div id="countryAvailability"></div>
              </td>
          </tr>
      </table>

      <h3>Profile Information</h3>

      <table>
          <tr>
              <td>Language Preference:</td>
              <td>
                  <select id="languagePreference" name="languagePreference" value=${sessionScope.loginAccount.languagePreference}>
                      <option value="english"  ${sessionScope.loginAccount.languagePreference == 'english' ? 'selected' : ''}>english</option>
                      <option value="chinese"  ${sessionScope.loginAccount.languagePreference == 'chinese' ? 'selected' : ''}>chinese</option>
                  </select>
              </td>
          </tr>
          <tr>
              <td>Favourite Category:</td>
              <td>
                  <select id="favouriteCategoryId" name="favouriteCategoryId">
                      <option value="BIRDS"  ${sessionScope.loginAccount.favouriteCategoryId == 'BIRDS' ? 'selected' : ''}>BIRDS</option>
                      <option value="CATS" ${sessionScope.loginAccount.favouriteCategoryId == 'CATS' ? 'selected' : ''}>CATS</option>
                      <option value="DOGS" ${sessionScope.loginAccount.favouriteCategoryId == 'DOGS' ? 'selected' : ''}>DOGS</option>
                      <option value="FISH" ${sessionScope.loginAccount.favouriteCategoryId == 'FISH' ? 'selected' : ''}>FISH</option>
                      <option value="REPTILE" ${sessionScope.loginAccount.favouriteCategoryId == 'REPTILE' ? 'selected' : ''}>REPTILES</option>
                  </select>
              </td>
          </tr>
          <tr>
              <td>Enable MyList</td>
              <td><input type="checkbox" id="listOption" name="listOption" checked="${sessionScope.loginAccount.listOption}"></td>



          </tr>
          <tr>
              <td>Enable MyBanner</td>
              <td><input type="checkbox" id="bannerOption" name="bannerOption" checked="${sessionScope.loginAccount.bannerOption}"></td>
          </tr>

      </table>



      <input type="submit" value="Save Account Information">

  </form>>

  <a href="MyOrder">My Orders</a>
</div>
<script src="./js/Account/editAccountCheck.js"></script>

<%@ include file="../common/bottom.jsp" %>